<template>
  <div class="user">
    <!-- <el-card class="user-search"> -->
    <el-row>
      <el-form ref="addForm" :inline="true" :model="dataForm">
        <el-form-item label="用户名称" prop="username">
          <el-input v-model.trim="dataForm.username" />
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model.trim="dataForm.email" />
        </el-form-item>
        <el-form-item label="角色" prop="role_id">
          <el-select v-model="dataForm.role_id" placeholder="请选择">
            <el-option value="" label="全部" />
            <el-option value="1" label="超级管理员" />
            <el-option value="2" label="管理员" />
            <el-option value="3" label="老师" />
            <el-option value="4" label="学生" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <div>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="emptyForm">清除</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-row>

    <!-- </el-card> -->
    <!-- <el-card class="user-list"> -->

    <div class="table-wrap">
      <el-row>
        <el-button
          type="primary"
          class="add-btn"
          icon="el-icon-plus"
          @click="addEvent"
        >新增用户</el-button>
      </el-row>
      <el-table :data="userList">
        <el-table-column align="center" label="序号" width="80">
          <template v-slot="{ $index }">
            {{ (dataForm.page - 1) * dataForm.limit + $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="username" label="用户名" />
        <el-table-column align="center" prop="phone" label="电话" />
        <el-table-column align="center" prop="email" label="邮箱" />
        <el-table-column align="center" prop="role_id" label="角色">
          <template v-slot="{ row }">
            {{
              { 1: '超级管理员', 2: '管理员', 3: '老师', 4: '学生' }[
                row.role_id
              ]
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="remark" label="备注" />
        <el-table-column align="center" prop="status" label="状态">
          <template v-slot="{ row }">
            {{ row.status === 1 ? '启用' : '禁用' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <div>
              <el-button type="text" @click="editEvent(row)">编辑</el-button>
              <el-button type="text" @click="openEvent(row)">启用</el-button>
              <el-button type="text" @click="delEvent(row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-card> -->
      <!-- <el-card class="user-paging"> -->
      <el-pagination
        class="pagination"
        :current-page.sync="dataForm.page"
        :page-sizes="pagination.pageSizes"
        :page-size.sync="dataForm.limit"
        :layout="pagination.layout"
        :total="total"
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </div>
    <!-- </el-card> -->
    <Add ref="add" @refresh="getData" />
  </div>
</template>

<script>
export default {
  components: {
    Add: () => import('./components/add.vue')
  },
  data() {
    return {
      dataForm: {
        username: '', //	昵称
        email: '', //	邮箱
        role_id: '', //
        page: 1,
        limit: +localStorage.getItem('pageSize') || 10
      },
      total: 10,
      userList: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    sizeChange(size) {
      localStorage.setItem('pageSize', size)
      this.getData()
    },
    currentChange() {
      this.getData()
    },
    async getData() {
      const res = await this.$api.user.userList(this.dataForm)
      this.userList = res.data.items
      this.total = res.data.pagination.total
    },
    // 新增
    addEvent() {
      this.$refs.add.addShow = true
    },
    // 编辑
    editEvent(row) {
      this.$refs.add.addShow = true
      this.$refs.add.addModel = 'edit'
      this.$refs.add.dataForm = this.deepCopy(row)
    },
    // 删除
    async delEvent(row) {
      await this.$api.user.userRemovePost(row)
      this.$message.success('删除用户成功')
      this.getData()
    },
    // 启用
    async openEvent(row) {
      await this.$api.user.userStatusPost(row)
      this.getData()
    },
    // 清除按钮
    emptyForm() {
      this.formReset({ exception: ['page', 'limit'] })
      this.getData()
    },
    // 搜索按钮
    search() {
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.table-wrap {
  margin-top: 20px;
  .el-button.add-btn {
    margin-bottom: 15px;
  }
}

::v-deep .el-table {
  border: 1px solid #ccc;
  border-top: none;
  th {
    border-bottom: 1px solid #b3b3b3;
    border-top: 1px solid #b3b3b3;
    background: #f0f0f0;
  }
}
</style>
